<template>
	<view class="free-payment">
		<common-popup :width="500" height="500" :show="show" @close="close">
			<template #title>
				<view>免单确认</view>
			</template>
			<template>
				<view>
					<view class="form-item flex-column">
						<view class="form-label">
							免单原因<text class="text-red">*</text>
						</view>
						<view class="check-list flex">
							<view class="check-item" v-for="item in reasonList" @click="onSelect(item)"
								:class="{active:reason===item}">
								{{item}}
							</view>
						</view>
					</view>
					<textarea class="text-area margin-top" placeholder="请输入备注"></textarea>
					<view class="form-button flex justify-between padding-tb">
						<button class="button lg line-white flex-1">取消</button>
						<button class="button lg flex-1"> 免单并结算</button>
					</view>
				</view>
			</template>
		</common-popup>
	</view>
</template>

<script>
	export default {
		name: "free-payment",
		props: {
			show: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				reason: "顾客投诉质量",
				reasonList: [
					'顾客投诉质量',
					'友情打折',
					'临时活动'
				]
			};
		},
		methods: {
			onSelect(e) {
				this.reason = e
			},
			close() {
				this.$emit('close')
			}
		},
	}
</script>

<style lang="scss" scoped>
	.text-area {
		width: 100%;
		border-radius: 1rem;
		background-color: #f5f5f5;
		padding: 2rem;
		min-height: 10rem;
	}

	.form-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-top: 1.5rem;

		&.flex-column {
			flex-direction: column;
			align-items: flex-start;

			.form-label {
				padding-top: 0;
			}
		}

		&.label-top {
			align-items: flex-start;

			.form-label {
				// padding-top: 0;
			}
		}

		.form-label {
			font-size: $retail-font-size-sm;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			text-align: left;
			padding: 1.5rem 0;
			margin-right: 1rem;
			min-width: 10rem;

		}

		.form-input {
			border: 1px solid #e5e5e5;
			border-radius: 1rem;
			height: 6rem;
			padding: 1.5rem;
			width: 32rem;
		}

		.form-radio {
			width: 32rem;
			display: flex;
			align-items: center;
		}

		.form-textarea {
			width: 32rem;
			height: 10rem;
			background-color: #f5f5f5;
			padding: 1.5rem;
			border-radius: 1rem;
		}
	}


	.check-list {
		display: flex;
		justify-content: space-between;
		width: 100%;
	}

	.check-item {
		// padding: 1.3rem 2rem;
		padding: 0 .5rem;
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 13.5rem;
		height: 6rem;
		text-align: center;
		border-radius: 1rem;
		border: 1px solid #e5e5e5;
		color: #333;
		font-size: $retail-font-size-sm;

		&.active {
			border-color: $retail-color-primary;
			color: $retail-color-primary;
			background-color: $retail-color-primary-light;
		}
	}
</style>
